<template>
  <div>
    <h2 class="text-center">新闻列表</h2>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media" v-for="val in newslist" :key="val.id">
        <router-link :to="'/home/newsinfo/'+val.id">
          <img class="mui-media-object mui-pull-left" :src="val.img_url">
          <div class="mui-media-body">
            <h2> {{val.title}}</h2>
            <p class="mui-ellipsis">
                <span>发表时间：{{ val.add_time | dateFromat }}</span>
                <span>点击：{{val.click}}次</span>
            </p>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios'
import {Toast} from 'mint-ui'

export default {
    data(){
        return{
            newslist:[]
        }
    },
    created(){
        this.getnewlist();
    },
    methods:{
        getnewlist(){
            axios.get("api/getnewslist")
            .then(res=>{
                if(res.data.status===0){
                    this.newslist=res.data.message
                }
                else{
                    Toast('状态错误')
                }
               
            })
            .catch(res=>{
                Toast('获取api失败')
            })
        }
    }
   
};
</script>
<style lang="scss" scoped>
.text-center{
    text-align: center;
    font-size: 16px;
    font-size: #333;
}
.mui-table-view li{
    h2{
        font-size: 14px;
    }
    .mui-ellipsis{
        font-size: 12px;
        color: #226aff;
        display: flex;
        justify-content: space-between;
    }
}
</style>